<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <script src="<%=basePath%>/public/js/rem.js"></script>
    <link rel="stylesheet" href="<%=basePath%>/public/css/public.css">
    <title>医疗设备系统</title>
    <%-- css --%>
    <link rel="shortcut icon" href="<%=basePath%>/images/favicon.ico">
    <link rel="stylesheet" href="<%=basePath%>/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=basePath%>/plugins/iziModal/css/iziModal.min.css">
    <link rel="stylesheet" href="<%=basePath%>/plugins/flavr/flavr.css">
    <%-- js --%>
    <script src="<%=basePath%>/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="<%=basePath%>/plugins/jQuery/jquery.cookie.js"></script>
    <script src="<%=basePath%>/plugins/fastclick/fastclick_1.0.6.min.js"></script>
    <script src="<%=basePath%>/plugins/flavr/flavr.min.js"></script>
    <script src="<%=basePath%>/plugins/charts/js/echarts.min.js"></script>
    <script src="<%=basePath%>/plugins/iziModal/js/iziModal.min.js"></script>
    <script src="<%=basePath%>/plugins/charts/js/tableHeadFixer.js"></script>

    <%-- my css js --%>
    <link rel="stylesheet" href="<%=basePath%>/css/area/overview.css">
    <script src="<%=basePath%>/public/js/public.js"></script>
    <script src="<%=basePath%>/js/area/overview-option.js"></script>
</head>
<body>
<%-- 头部 --%>
<jsp:include page="header-overview.jsp"></jsp:include>

<div id="container">
    <%-- 左侧 --%>
    <div class="body left">
        <div class="top">
            <%-- 医院总数 --%>
            <div class="total hospital-count">
                <h3 class="title">医院总数：<span id="hospital-count">0</span>家</h3>
                <div id="hospital-counts"></div>
            </div>
            <%-- 负荷率 --%>
            <div class="total load-rate">
                <h3 class="title">负荷率</h3>
                <div id="load-rate-chart" style="height: 180px;"></div>
            </div>
            <%-- 设备情况 --%>
            <div class="total assets">
                <div id="assets-chart" style="height: 180px;"></div>
                <div class="align-center">
                    <p>设备数量：&nbsp;<span id="assets-count">0台</span><img src="<%=basePath%>/plugins/charts/images/arrow_zero.png"></p>
                    <p>重点设备：&nbsp;<span id="key-point-assets">0台</span></p>
                </div>
            </div>
            <%-- 服务人次 --%>
            <div class="total person-times">
                <div id="person-chart" style="height: 180px;"></div>
                <div class="align-center">
                    <p>今年人次：&nbsp;<span id="person-count">0</span><img src="<%=basePath%>/plugins/charts/images/arrow_zero.png"></p>
                    <p>住院人次：&nbsp;<span id="inpatient-assets">0</span></p>
                </div>
            </div>
        </div>
        <div class="bottom">
            <%-- 医院分布图 --%>
            <div id="hospital-distribution"></div>
        </div>
    </div>

    <%-- 右侧 --%>
    <div class="body right">
        <div class="top">
            <%-- 闵行区医院分布 --%>
            <div class="hospital-map">
                <div class="header-title">
                    <span>设备</span>
                    <span>维修</span>
                    <span>保养</span>
                    <span>强检</span>
                </div>
                <div id="map" style="height: 500px;"></div>
            </div>
        </div>
        <div class="bottom">
            <%-- 医院排名 --%>
            <div class="hospital-top">
                <h3 class="title">医院排名<a id="more" class="more fr">更多</a></h3>
                <div id="title">
                    <span class="name">医院名称</span>
                    <span class="value">设备数量(台)</span>
                    <span class="value">服务病人(人)</span>
                </div>
                <div id="value"></div>
            </div>
        </div>
    </div>
</div>

<div id="hospital-modal">
    <table id="detail-table">
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>
</div>

<%-- my css --%>
<script src="<%=basePath%>/js/area/overview.js"></script>
</body>
</html>
